<template>
    <div class="trading-shadow" @click="closeTradingSelector" v-show="show_trading_selector">
        <div class="trading" @click.stop="">
            <div class="header-line">
                <div class="title">{{ trade_type_selected.name }} {{ stock_detail_data.symbol }}</div>
                <div class="exit-btn" @click="closeTradingSelector"></div>
            </div>
            <div class="price-line">
                <div class="left-box">
                    <div class="line-name">Current Price</div>
                </div>
                <div class="right-box">
                    <div class="price">{{ stock_detail_data.price }}</div>
                    <!-- <div class="change" :style="`color: ${ 2.34 > 0 ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">+$2.34 (1.19%)</div> -->
                </div>
            </div>
            <div class="order-type-line">
                <div class="select-box">
                    <div class="select-item" v-for="item in trade_type" :key="item.id" :style="`background-color: ${ trade_type_selected.id == item.id ? 'var(--active-color)' : '#00000000' }; color: ${ trade_type_selected.id == item.id ? '#fff' : '#000' }`" @click="trade_type_selected = item">{{ item.name }}</div>
                </div>
            </div>
            <div class="order-type-line">
                <div class="line-name">Order Type</div>
                <div class="select-box">
                    <div class="select-item" v-for="item in order_type" :key="item.id" :style="`background-color: ${ order_type_selected == item.id ? 'var(--active-color)' : '#00000000' }; color: ${ order_type_selected == item.id ? '#fff' : '#000' }`" @click="order_type_selected = item.id">{{ item.name }}</div>
                </div>
            </div>
            <div class="quantity-line">
                <div class="line-name">Quantity</div>
                <div class="input-line">
                    <div class="btn sub-btn" @click="subQuantity">-</div>
                    <input type="text" placeholder="1" inputmode="decimal" v-model="quantity" @input="checkQuantity" />
                    <div class="btn add-btn" @click="addQuantity">+</div>
                </div>
            </div>
            <div class="input-price-line" v-show="order_type_selected != 0">
                <div class="line-name">Limit Price</div>
                <div class="input-line">
                    <input type="text" placeholder="0.00" inputmode="decimal" v-model="input_price" @input="checkLimitPrice">
                </div>
            </div>
            <div class="result-line">
                <div class="result-item">
                    <div class="k">{{ trade_type_selected.id == 1 ? 'Estimated Cost' : 'Received Amt.' }}</div>
                    <div class="v">${{ total_price == 'NaN' ? '0.00' : total_price }}</div>
                </div>
                <div class="result-item" v-show="trade_type_selected.id == 1">
                    <div class="k">Account Balance</div>
                    <div class="v" style="color: var(--positive-number-color)">${{ parseFloat(userInfo.balance).toFixed(2) }}</div>
                </div>
                <div class="result-item" v-show="trade_type_selected.id == 1">
                    <div class="k">Max Buy</div>
                    <div class="v">{{ max_buy_count }}</div>
                </div>
                <div class="result-item" v-show="trade_type_selected.id == 2">
                    <div class="k">Holding</div>
                    <div class="v">{{ stock_holding_count }}</div>
                </div>
            </div>
            <div class="btn" :style="`background-color: ${ trade_type_selected.id == 1 ? 'var(--active-color)' : 'var(--negative-number-color)' };`" @click="tradingBtn">
                <div class="text">{{ trade_type_selected.name }} {{ stock_detail_data.shortName }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { stock_detail_data, market_status, max_buy_count, stock_holding_count } from '@/service/market.js';
import { show_trading_selector, order_type, order_type_selected, trade_type, trade_type_selected, quantity, input_price, subQuantity, addQuantity, closeTradingSelector, tradingService } from '@/service/trading.js';
import { userInfo } from '@/service/user.js';
import { holding_list } from '@/service/asset.js';
import { computed } from 'vue';
import { loading, toast } from '@/service/status';
import { checkNonDigit, checkPrice } from '@/utils/input';
import { is_login } from '@/service/auth.js';

function checkQuantity(e) {
    checkNonDigit(e, quantity);
}

function checkLimitPrice(e) {
    checkPrice(e, input_price);
}

const total_price = computed(() => {
    if (order_type_selected.value == 0) {
        let price = stock_detail_data.value.price;
        price = parseFloat(price.slice(1));
        return (price * parseInt(quantity.value)).toFixed(2);
    } else {
        return (parseFloat(input_price.value) * parseInt(quantity.value)).toFixed(2);
    }
});

async function tradingBtn() {
    // 校验是否登陆
    if (!is_login.value) {
        toast.warning('Please login', 1500);
        return ;
    }
    loading.value = true;
    await tradingModelTrading();
    loading.value = false;
}

async function tradingModelTrading() {
    // 获取数据
    let symbolId = 0;
    let shortName = stock_detail_data.value.shortName;
    let minTrade = stock_detail_data.value.minTrade;
    let count = quantity.value;
    // 校验市场关闭
    if (!market_status.close) {
        toast.warning('Stocks cannot be sold during market closures.', 1500);
        return ;
    }
    // 校验参数
    count = parseInt(count);
    if (!count) {
        toast.warning('Please input quantity', 1500);
        return ;
    }
    if (trade_type_selected.value.name == 'Buy') {
        // 校验最低交易股数
        if (count < minTrade) {
            toast.warning(`The minimum trading shares is ${ minTrade }`, 1500);
            return ;
        }
        // 校验账户余额
        if (order_type_selected.value == 0) {
            // 市价交易校验实时价格
            let price = parseFloat(stock_detail_data.value.price.slice(1));
            if (parseFloat(userInfo.balance) < price * count) {
                toast.warning('Your balance is insufficient', 1500);
                return ;
            }
        } else {
            // 限价交易校验输入价格
            if (parseFloat(userInfo.balance) < parseFloat(input_price.value) * count) {
                toast.warning('Your balance is insufficient', 1500);
                return ;
            }
        }
        await tradingService.stockOpen(shortName);
    } else {
        // 校验持仓记录
        let self_stock_count = 0;    // 持有股数
        for (let i = 0; i < holding_list.value.length; i++) {
            let item = holding_list.value[i];
            if (item.symbol == shortName) {
                symbolId = item.id;
                self_stock_count = item.shares;   // 持有股数
                break;
            }
        }
        // 校验持仓记录
        if (self_stock_count < count) {
            toast.warning(`The quantity of ${ shortName } is insufficient.`, 2000);
            return ;
        }
        await tradingService.stockClose(symbolId, shortName);
    }
}
</script>

<style scoped lang="less">
.trading-shadow {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    background-color: #88888880;
    backdrop-filter: blur(0.7vw);

    .trading {
        box-sizing: border-box;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 5vw;
        background-color: #fff;
        border-radius: 3vw 3vw 0 0;
        display: flex;
        flex-direction: column;
        gap: 5vw;

        .header-line {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title {
                font-size: 4.5vw;
                font-weight: 700;
            }

            .exit-btn {
                --size: 3.5vw;
                --line-width: 0.1vw;
                width: var(--size);
                height: var(--size);
                position: relative;

                &::before, &::after {
                    content: "";
                    display: block;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%) rotate(45deg);
                }

                &::before {
                    width: var(--line-width);
                    height: 100%;
                    background-color: var(--text-color);
                }

                &::after {
                    width: 100%;
                    height: var(--line-width);
                    background-color: var(--text-color);
                }
            }
        }

        .price-line {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

            .left-box {
                .line-name {
                    font-size: 3.2vw;
                    color: var(--text-light-color);
                }
            }

            .right-box {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: 2vw;

                .price {
                    font-size: 4vw;
                    font-weight: 700;
                    color: var(--text-color);
                }

                .change {
                    font-size: 3.5vw;
                }
            }
        }

        .order-type-line, .quantity-line, .input-price-line {
            display: flex;
            flex-direction: column;
            gap: 2vw;

            .line-name {
                font-size: 3.3vw;
                font-weight: 500;
            }
        }

        .order-type-line {
            .select-box {
                --h: 8vw;
                width: 100%;
                height: var(--h);
                display: flex;
                border: 0.1vw solid var(--border-color);
                border-radius: 2vw;
                background-color: var(--bg-color);
                overflow: hidden;

                .select-item {
                    flex: 1;
                    font-size: 3vw;
                    text-align: center;
                    line-height: var(--h);
                }
            }
        }

        .quantity-line {
            .input-line {
                --h: 6vw;
                width: 100%;
                height: var(--h);
                display: flex;
                align-items: center;
                border: 0.1vw solid var(--border-color);
                border-radius: 2vw;
                background-color: var(--bg-color);
                overflow: hidden;

                .btn {
                    width: 8vw;
                    height: var(--h);
                    font-size: 4vw;
                    text-align: center;
                    line-height: var(--h);
                    background-color: var(--bg-color);
                }

                input {
                    flex: 1;
                    height: var(--h);
                    border: 0;
                    outline: 0;
                    font-size: 3vw;
                    text-align: center;
                }
            }
        }

        .input-price-line {
            .input-line {
                box-sizing: border-box;
                --h: 10vw;
                width: 100%;
                height: var(--h);
                padding: 2vw;
                border-radius: 2vw;
                border: 0.1vw solid var(--border-color);
                border-radius: 2vw;
                overflow: hidden;

                input {
                    width: 100%;
                    height: 100%;
                    border: 0;
                    outline: 0;
                    font-size: 3.5vw;
                }
            }
        }

        .result-line {
            display: flex;
            flex-direction: column;
            gap: 2vw;
            padding: 3vw;
            border-radius: 2vw;
            background-color: var(--bg-color);

            .result-item {
                display: flex;
                justify-content: space-between;

                .k {
                    font-size: 3.2vw;
                    color: var(--text-light-color);
                }

                .v {
                    font-size: 3.5vw;
                    font-weight: 500;
                }
            }
        }

        .btn {
            --h: 10vw;
            width: 100%;
            height: var(--h);
            text-align: center;
            border-radius: 2vw;
            display: flex;
            justify-content: center;
            align-items: center;

            .text {
                color: #fff;
                font-size: 3.5vw;
                font-weight: 500;
            }
        }
    }
}
</style>